<template>
	<!-- 6,7 状态显示在交易关闭下 -->
	<div class="app-container cultural-creativity-order">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
			<div class="app-space-between">
				<div class="app-space-between-left">
					<div>
						<el-radio-group v-model="queryParams.orderState" style="margin-bottom: 30px;"
							@change="resetQuery">
							<el-radio-button :label="item.value" v-for="(item,index) in orderStateList" :key="index">
								{{item.label}}
							</el-radio-button>
						</el-radio-group>
					</div>
					<div>
						<el-form-item label="订单编号:" prop="orderNumber">
							<el-input v-model="queryParams.orderNumber" placeholder="请输入订单编号" clearable
								@clear="handleQuery" @keyup.enter.native="handleQuery" />
						</el-form-item>

						<el-form-item label="买家手机号:" prop="buyerPhone">
							<el-input v-model="queryParams.buyerPhone" placeholder="请输入买家手机号" clearable
								@clear="handleQuery" @keyup.enter.native="handleQuery" />
						</el-form-item>

						<el-form-item label="售后类型:" prop="afterSalesType" v-if="queryParams.orderState == 9">
							<el-select v-model="queryParams.afterSalesType" placeholder="请选择" @change="handleQuery"
								clearabl>
								<el-option label="退款" value="2" />
								<el-option label="退货" value="1" />
								<el-option label="换货" value="3" />
							</el-select>
						</el-form-item>

						<el-form-item label="申请退款时间:" prop="creatorTime" v-if="queryParams.orderState == 9">
							<el-date-picker v-model="queryParams.creatorTime" type="datetime" placeholder="请选择" />
						</el-form-item>

						<el-form-item label="售后状态:" prop="refundStatus" v-if="queryParams.orderState == 9">
							<el-select v-model="queryParams.refundStatus" placeholder="请选择" @change="handleQuery"
								clearabl>
								<el-option :label="item.label" :value="item.value"
									v-for="(item,index) in refundStatusList" :key="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="下单时间:" prop="time1" v-if="queryParams.orderState != 9">
							<el-date-picker v-model="queryParams.time1" type="daterange" @change="handleQuery"
								range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="支付时间:" prop="endPayTime" v-if="queryParams.orderState != 9">
							<el-date-picker v-model="queryParams.endPayTime" type="date" placeholder="选择支付时间" />
						</el-form-item>
					</div>
				</div>
				<div class="app-space-between-right">
					<el-form-item>
						<el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
						<el-button size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</div>
			</div>
		</el-form>

		<table class="table" border="0" v-loading="loading" cellspacing="0" v-if="queryParams.orderState != 9">
			<thead class="thead">
				<th width="350">商品信息</th>
				<th width="100">单价*数量</th>
				<th>订单总额</th>
				<th width="300">买家/收货人</th>
				<th width="100">订单状态</th>
			</thead>
			<div style="height:14px;"></div>
			<tbody v-for="(item,index) in postList" :key="index" class="tbody">
				<tr>
				<tr class="title">
					<td>订单编号：{{item.orderNumber}}</td>
					<td colspan="2">下单时间：{{item.orderTime | $YYYY_MM_DD_hh_mm_ss}}</td>
					<td colspan="3">订单金额：￥{{item.actualPayment}}</td>
				</tr>
				<tr v-for="(i,o) in item.wcOrderGoodsList" :key="o" class="tr">
					<td>
						<div class="picText">
							<div style="width: 60px; height: 60px;margin-right: 8px;">
								<el-image style="width: 60px; height: 60px;" :src="baseUrl+i.goodsPic" fit="cover" />
							</div>
							<div>
								<div>{{i.goodsName}}</div>
								<div style="margin-top:4px;color:#AAAAAA;">{{i.specificationName || '规格丢了'}}</div>
							</div>
						</div>
					</td>
					<td align="center">￥{{i.price}} * {{i.num}}</td>
					<td :rowspan="o?1:item.wcOrderGoodsList.length" v-if="!o">
						订单金额：￥{{item.actualPayment}}（包含：商品总价￥{{item.totalPrice}}运费：￥{{item.freight}}优惠券：￥{{item.couponPrice||0}})
					</td>
					<td :rowspan="o?1:item.wcOrderGoodsList.length" v-if="!o">
						<div>买家手机号: {{item.buyerPhone}}</div>
						<div>收货人: {{item.recipientName}} {{item.recipientPhone}}</div>
						<div>买家收货地址: {{item.recipientCity}} {{item.recipientCounty}} {{item.recipientProvince}}
							{{item.recipientAddress}}
						</div>
					</td>
					<td align="center">{{item.orderState | orderStateFilter}}</td>
				</tr>
				</tr>
			</tbody>
		</table>

		<table class="table table_end" border="0" v-loading="loading" cellspacing="0"
			v-if="queryParams.orderState == 9">
			<thead class="thead">
				<th>订单编号</th>
				<th width="300">商品信息</th>
				<th width="150">售后类型</th>
				<th width="150">申请售后金额</th>
				<th width="200">售后原因</th>
				<th width="180">售后状态</th>
				<th width="140">操作</th>
			</thead>
			<tbody v-for="(item,index) in postList" :key="index" class="tbody">
				<tr>
					<td align="center">{{item.orderNumber}}</td>
					<td>
						<div class="picText">
							<div style="width: 60px; height: 60px;margin-right: 8px;">
								<el-image style="width: 60px; height: 60px;" :src="baseUrl+item.goodsPic" fit="cover" />
							</div>
							<div>
								<div>{{item.goodsName}}</div>
								<div style="margin-top:4px;color:#AAAAAA;">
									<div>{{item.specificationName || '规格丢了'}}</div>
									<div style="margin-top: 8px;">x{{item.num}}</div>
								</div>
							</div>
						</div>
					</td>
					<td align="center">{{item.afterSalesType | itemAfterSalesType}}</td>
					<td align="center">{{item.refundAmount}}</td>
					<td align="center">{{item.refundReason}}</td>
					<td align="center">{{item.refundStatus | itemRefundStatus}}</td>
					<td align="center">
						<div v-if="Number(item.afterSalesType) == 1">
							<el-link type="primary" v-if="Number(item.refundStatus) == 2" @click="handleCanleMoney(item)">直接退款</el-link>
							<br />
							<el-link type="primary" v-if="Number(item.refundStatus) == 2" @click="handleCanleShopping(item)">同意售后寄回商品</el-link>
							<br />
							<el-link type="primary" v-if="Number(item.refundStatus) == 2" @click="handleCanleNoShopping(item)">拒绝退货</el-link>
							<br />
							<el-link type="primary" v-if="Number(item.refundStatus) == 11" @click="handleSureShopping(item)">确认收货</el-link>
						</div>
						<div v-if="Number(item.afterSalesType) == 2 || Number(item.afterSalesType) == 0">
							<el-link type="primary" v-if="Number(item.refundStatus) == 2" @click="handleCanleMoney(item)">直接退款</el-link>
							<br />
							<el-link type="primary" v-if="Number(item.refundStatus) == 2" @click="handleCanleNoShopping(item)">拒绝退货</el-link>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
	</div>
</template>

<script>
	import {
		listWcOrder,
		deleteWcOrder,
		listWcRefundRequest,
		wcRefundRequestApprove
	} from "@/api/culturalCreativity/order.js";
	let orderStateList = [{
			value: '',
			label: "全部订单"
		},
		{
			value: 1,
			label: "待付款"
		},
		{
			value: 2,
			label: "待发货"
		},
		{
			value: 3,
			label: "待收货"
		},
		{
			value: 5,
			label: "交易完成"
		},
		{
			value: "6,7",
			label: "交易关闭"
		},
		{
			value: 9,
			label: "售后订单"
		},
	];
	let refundStatusList = [{
			value: 1,
			label: "无需审核退款成功"
		},
		{
			value: 2,
			label: "退款审核中"
		},
		{
			value: 3,
			label: "退款审核通过，等待商品寄回"
		},
		{
			value: 4,
			label: "已收到退回货物，退款中"
		},
		{
			value: 5,
			label: "退款审核通过，退款中"
		},
		{
			value: 6,
			label: "退款审核通过，退款成功"
		},
		{
			value: 7,
			label: "审核不通过，拒绝退款"
		},
		{
			value: 8,
			label: "换货审核通过，等待商品寄回"
		},
		{
			value: 9,
			label: "收到换货货物，换货中"
		},
		{
			value: 10,
			label: "已换出"
		},
		{
			value: 11,
			label: "物流单号已填写，等待收货"
		},
	]
	export default {
		data() {
			return {
				// 遮罩层
				loading: true,
				// 总条数
				total: 0,
				// 岗位表格数据
				postList: [],
				orderStateList,
				refundStatusList,
				baseUrl: process.env.VUE_APP_BASE_API,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderNumber: "",
					buyerPhone: "",
					recipientPhone: "",
					orderState: "",
					endPayTime: "",
					time1: [],
					afterSalesType: "",
					refundStatus: "",
					creatorTime: ""
				},
			};
		},
		async created() {
			this.getList();
		},
		methods: {
			/** 查询岗位列表 */
			getList() {
				this.loading = true;
				let queryParams = {
					...this.queryParams
				}
				queryParams.beginOrderTime = queryParams.time1[0];
				queryParams.endOrderTime = queryParams.time1[1];
				delete queryParams.time1;
				if (queryParams.orderState == 9) { //售后详情列表
					listWcRefundRequest({}, queryParams).then(response => {
						this.postList = response.rows;
						console.log(this.postList)
						this.total = response.total;
						this.loading = false;
					});
				} else { //订单列表
					listWcOrder({}, queryParams).then(response => {
						this.postList = response.rows;
						console.log(this.postList)
						this.total = response.total;
						this.loading = false;
					});
				}

			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			async handleCanleMoney(options) {
				console.log('查看此条数据：', options.afterSalesType);
				await this.$confirm('退货商品未入库，确认要“直接退款”吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				});
				let res = await wcRefundRequestApprove({
					id: options.id,
					status: 1
				});
				this.getList();
				console.log('退款成功', res);
			},
			async handleCanleShopping(options) {
				await this.$confirm('此操作同意售后寄回商品?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				});
				let res = await wcRefundRequestApprove({
					id: options.id,
					status: 2
				});
				this.getList();
				console.log('同意售后寄回商品', res);
			},
			async handleSureShopping(options) {
				await this.$confirm('此操作确认收货?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				});
				let res = await wcRefundRequestApprove({
					id: options.id,
					status: 4
				});
				this.getList();
				console.log('确认收货', res);
			},
			async handleCanleNoShopping(options) {
				await this.$confirm('此操作将拒绝退货?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				});
				let res = await wcRefundRequestApprove({
					id: options.id,
					status: 0
				});
				this.getList();
				console.log('拒绝退货', res);
			},
		},
		filters: {
			itemAfterSalesType(num) {
				switch (Number(num)) {
					case 1:
						return '退货';
					case 2:
						return '退款';
					case 3:
						return '换货';
					default:
						return '未发货退款';
				}
			},
			itemRefundStatus(num) {
				return refundStatusList.reduce((pev, item) => {
					if (item.value == Number(num)) {
						pev = item.label;
					}
					return pev;
				}, '')
			},
			orderStateFilter(num) {
				let numb = Number(num);
				switch (numb) {
					case 1:
						return "待付款"
					case 2:
						return "待发货"
					case 3:
						return "待收货"
					case 4:
						return "待评价"
					case 5:
						return "交易完成"
					case 6:
						return "取消订单"
					case 7:
						return "自动取消"
					case 8:
						return "交易关闭"
					default:
						return "error"
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.table_end {
		.tbody tr td {
			border: 1px solid #EEEEEE
		}
	}

	.table {
		width: 100%;
		font-size: 14px;

		.thead {
			background-color: rgba(250, 250, 250, 1);
			color: #000000;

			th {
				height: 54px;
				font-weight: 400;
			}
		}

		.tbody {
			.title {
				background-color: rgba(250, 250, 250, 1);

				td {
					height: 34px;
					color: #555555;
				}
			}

			.tr td {
				border: 1px solid rgb(242, 242, 242);
				padding: 12px;
			}
		}

		.picText {
			display: flex;
			align-items: center;
			padding: 16px 0;
		}

		tbody tr td {
			min-height: 40px;
		}
	}
</style>
